<template>
    <div class="settings">
        <el-tabs :tab-position="Settings_tabPosition">
            <el-tab-pane label="基本设置">
                <div class="title">基本设置</div>
                <div class="EditMsg">
                    <div class="EditMag-text">
                        <div class="EditMag-name">
                            <div class="sub-title">昵称</div>
                            <el-input :placeholder="person.AdminName" v-model="personMsg.AdminName" clearable></el-input>
                        </div>
                        <div class="EditMag-synopsis">
                            <div class="sub-title">简介</div>
                            <el-input type="textarea" :rows="2" :placeholder="person.AdminSign" v-model="personMsg.AdminSign"></el-input>
                        </div>
                        <div class="EditMag-email">
                            <div class="sub-title">邮箱</div>
                            <el-input :placeholder="person.AdminEmail" v-model="personMsg.AdminEmail" clearable></el-input>
                        </div>
                    </div>
                    <div class="EditMag-img">
                        <el-image style="width: 100px; height: 100px" :src="url" fit="fit"></el-image>
                    </div>
                </div>
                <el-button type="primary" @click="EditPersonMsg">更新信息</el-button>
            </el-tab-pane>

            <el-tab-pane label="安全设置" lazy>
                <div class="title">安全设置</div>
                <listItem>
                    <template #list-item-title>账户密码</template>
                    <template #list-item-detail>当前密码强度：</template>
                    <template #list-item-msg>强</template>
                    <template #list-item-operate>修改</template>
                </listItem>
                <listItem>
                    <template #list-item-title>密保手机</template>
                    <template #list-item-detail>已绑定手机：</template>
                    <template #list-item-msg>138****8293</template>
                    <template #list-item-operate>修改</template>
                </listItem>
                <listItem>
                    <template #list-item-title>密保问题</template>
                    <template #list-item-detail>未设置密保问题，密保问题可有效保护账户安全</template>
                    <template #list-item-operate>设置</template>
                </listItem>
                <listItem>
                    <template #list-item-title>备用邮箱</template>
                    <template #list-item-detail>已绑定邮箱：</template>
                    <template #list-item-msg>215***490@qq.com</template>
                    <template #list-item-operate>修改</template>
                </listItem>
                <listItem>
                    <template #list-item-title>MFA 设备</template>
                    <template #list-item-detail>未绑定 MFA 设备，绑定后，可以进行二次确认</template>
                    <template #list-item-operate>绑定</template>
                </listItem>
            </el-tab-pane>

            <el-tab-pane label="个性化" lazy>
                <div class="title">个性化</div>
                <listItem>
                    <template #list-item-title>风格配色</template>
                    <template #list-item-detail>整体风格配色设置</template>
                    <template #list-item-operate>
                        <el-switch
                            v-model="value"
                            active-text="白色"
                            inactive-text="黑色">
                        </el-switch>
                    </template>
                </listItem>
                <listItem>
                    <template #list-item-title>主题色</template>
                    <template #list-item-detail>页面风格配色：</template>
                </listItem>
            </el-tab-pane>

            <el-tab-pane label="账号绑定" lazy>
                <el-empty description="没有数据" :image-size="100"></el-empty>
            </el-tab-pane>
            <el-tab-pane label="消息通知" lazy>
                <el-empty description="没有数据" :image-size="100"></el-empty>
            </el-tab-pane>
        </el-tabs>
    </div>
    
</template>

<script>
import listItem from '@/components/slot/listItem'
import {mapState,mapMutations} from 'vuex'
export default {
    name:'Settings',
    components:{
        listItem,
    },
    computed:{
        ...mapState('Public',['publicWidth','Settings_tabPosition','person'])
    },
    data() 
    {
        return {
            value:true,
            personMsg:{
                AdminName:'',
                AdminSign:'',
                AdminEmail:''
            },
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
    },
    methods: {
        ...mapMutations('Public',['EidtSettings_personMsg']),
        EditPersonMsg()
        {
            this.EidtSettings_personMsg([this.personMsg.AdminName,this.personMsg.AdminSign,this.personMsg.AdminEmail])
            //数据重置
            this.personMsg = this.$options.data().personMsg;
        }
    },
}
</script>

<style lang="less" scoped>
    .settings
    {
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 8px;
        .el-tabs
        {
            padding: 20px;
            .el-tab-pane
            {
                padding: 0 30px;
                .title
                {
                    font-size: 18px;
                    color: #303133;
                    margin-bottom: 10px;
                }
                .list-item
                {
                    padding: 20px 0;
                    border-bottom: 1px solid #e8e8e8;
                }
                .list-item:nth-last-child(1)
                {
                    border-bottom: none;
                }

                .EditMsg
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .EditMag-text
                    {
                        width: 70%;
                    }
                    .EditMag-img
                    {
                        width: 30%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                    .el-image
                    {
                        border-radius: 50%;
                    }
                    .sub-title
                    {
                        color: rgba(0,0,0,.85);
                        padding: 10px 0;
                    }
                }
            }
            .el-tab-pane:nth-child(1)
            {
                .el-button
                {
                    margin-top: 20px;
                }
            }
        }
    }

    @media all and (max-width: 540px)
    {
        .EditMsg
        {
            flex-direction: column-reverse !important;
            .EditMag-text
            {
                width: 100% !important;
            }
        }
        .el-tab-pane:nth-child(1)
        {
            .el-button
            {
                margin-left:50%;
                transform: translate(-50%, 0);
            }
        }
    }
</style>